<template>
  <div>
      <div class="influence-module" v-if="valueTestChangeLog.length > 0">
       <a-icon type="snippets" style="margin-right: 5px" />变更后项目等级绩点：
        <div class="info-detail">
          <ul class="info-list">
            <li>
              <span class="list-title">项目等级：</span>
              <span class="redfont">
                {{ originLevelData.projectLevel ? originLevelData.projectLevel : '--' }}
              </span>
            </li>
            <li>
              <span class="list-title">X创新绩点：</span>
              <span class="redfont borderleft">
                {{ originLevelData.gradePoint && originLevelData.gradePoint > 0 ? originLevelData.gradePoint : '--' }}分
              </span>
            </li>
            <li>
              <span class="list-title">Y基本绩点：</span>
              <span class="redfont borderleft">
                {{
                  originLevelData.gradePointBasic && originLevelData.gradePointBasic > 0
                    ? originLevelData.gradePointBasic
                    : '--'
                }}分
              </span>
            </li>
            <li>
              <span class="list-title">核心力值：</span>
              <span class="redfont borderleft">
                {{
                  originLevelData.gradePointCore && originLevelData.gradePointCore > 0
                    ? originLevelData.gradePointCore
                    : '--'
                }}分
              </span>
            </li>
          </ul>
        </div>
        <a-icon type="snippets" style="margin-right: 5px" />变更后项目等级绩点：
        <div class="info-detail">
          <ul class="info-list">
            <li>
              <span class="list-title">项目等级：</span>
              <span class="redfont">
                {{ changeLevelData.projectLevel ? changeLevelData.projectLevel : '--' }}
              </span>
            </li>
            <li>
              <span class="list-title">X创新绩点：</span>
              <span class="redfont borderleft">
                {{ changeLevelData.gradePoint && changeLevelData.gradePoint > 0 ? changeLevelData.gradePoint : '--' }}分
              </span>
            </li>
            <li>
              <span class="list-title">Y基本绩点：</span>
              <span class="redfont borderleft">
                {{
                  changeLevelData.gradePointBasic && changeLevelData.gradePointBasic > 0
                    ? changeLevelData.gradePointBasic
                    : '--'
                }}分
              </span>
            </li>
            <li>
              <span class="list-title">核心力值：</span>
              <span class="redfont borderleft">
                {{
                  changeLevelData.gradePointCore && changeLevelData.gradePointCore > 0
                    ? changeLevelData.gradePointCore
                    : '--'
                }}分
              </span>
            </li>
          </ul>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  props: {
    valueTestChangeLog: {
      type: Array,
      default: () => {
        return []
      },
    },
    originLevelData: {
      type: Object,
      default: () => {
        return {projectLevel:'',gradePoint:'',gradePointBasic:'',gradePointCore:''}
      },
    },
    changeLevelData: {
      type: Object,
      default: () => {
        return {projectLevel:'',gradePoint:'',gradePointBasic:'',gradePointCore:''}
      },
    },
  },
  data() {
    return{}
  },
  methods: {},
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-tbody .ant-select-selection {
  border-radius: unset;
  border: unset;
}

/deep/ .ant-btn-primary {
  background: #4095e4;
}

/deep/ .ant-btn {
  border-radius: unset;
}

/deep/ .ant-table-thead > tr > th {
  background: #dadee9 !important;
}

/deep/.ant-table-small,
/deep/.ant-table-thead > tr:first-child > th:first-child,
/deep/.ant-table-thead > tr:first-child > th:last-child {
  border-radius: unset;
}

/deep/.ant-table-thead > tr > th,
/deep/.ant-table-tbody > tr > td,
/deep/.ant-table-tbody .ant-table-row td {
  padding: 10px 16px;
}

/deep/.ant-card-small > .ant-card-head {
  background: #f6f7f9;
}

/deep/.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  border-radius: unset;
  padding: 8px 32px;
  background: #f6f7f9;
}

/deep/.ant-collapse > .ant-collapse-item > .ant-collapse-content {
  height: 250px;
  overflow-y: scroll;
}

/deep/.ant-timeline-item-content {
  display: flex;
  justify-content: space-between;

  > div:last-child {
    min-width: 9vw;
    text-align: right;
    color: #999;
  }
}

.process-engine {
  /deep/ #process-container {
    width: unset !important;
  }

  /deep/ #process-container .process-item .info-fullMessage {
    max-width: 1200px;
  }
}

#change-record {
  border: 1px solid #e6e6e6;
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 55px;

  h4 {
    font-weight: bolder;
    display: inline-block;
    position: relative;
    padding-left: 13px;

    &:before {
      content: '';
      position: absolute;
      display: inline-block;
      top: 5%;
      left: 0;
      background-color: #47a4fa;
      width: 3px;
      height: 90%;
    }
  }

  .container {
    // margin:30px 125px 0;
    height: inherit;

    .title {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;

      h3 {
        font-size: 18px;
        font-weight: 600;
        margin-right: 25px;
      }

      .icon-plus {
        font-size: 13px;
        padding-right: 5px;
      }
    }

    .content {
      background-color: #fff;

      // border: 1px solid #eaeaea;
      .tip-head {
        padding: 11px 19px 0px;
        position: relative;
        top: 3px;
      }

      .content-title {
        border-bottom: 1px solid #f2f2f2;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header {
          span {
            margin-right: 30px;
          }
        }
      }

      .content-container {
        padding: 20px;

        ul {
          list-style: none;
          padding: 0;
        }

        .change-info {
          display: flex;

          li {
            margin-right: 120px;
          }
        }

        .change-explain {
          li {
            margin-bottom: 15px;
          }
        }

        .influence-module {
          h4 {
            margin: 15px 0;
          }

          .btn-box {
            margin-bottom: 10px;
            display: flex;
          }
        }

        .change-record {
          h4 {
            margin: 15px 0;
          }

          .record-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            > li {
              width: 50%;
              margin-bottom: 15px;

              &:nth-child(odd) {
                .ant-collapse {
                  margin-right: 1%;
                  width: 99%;
                }
              }

              &:nth-child(even) {
                .ant-collapse {
                  margin-left: 1%;
                  width: 99%;
                }
              }
            }
          }
        }

        .btn {
          display: flex;
          justify-content: center;
          margin-top: 30px;
          position: fixed;
          bottom: 15px;
          left: 0;
          width: 100%;
          z-index: 1;

          > button {
            min-width: 150px;
            margin: 0 5px;
          }
        }
      }

      .infoTips {
        background: #e6f7ff;
        border: 1px solid #aee1ff;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        color: #888;
      }
    }
  }
}

.line-content {
  .ant-col-8 {
    width: 30%;

    &:first-child {
      width: 40%;
    }
  }
}

.content-container .dept {
  /deep/ .ant-form-item .ant-form-item-label {
    width: 165px;
  }
}

.info-detail {
  background-color: #f6f7f9;
  border: 1px solid #ebebeb;
  padding: 1% 2.5%;
  position: relative;
  margin-bottom: 20px;

  .info-list {
    margin: 0;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 15px;

    > li {
      width: 25%;
      height: 25px;
      display: flex;
      align-items: center;

      > img {
        margin-right: 5px;
      }

      .list-title {
        height: unset;
        font-weight: 900;
      }
    }

    .one-row {
      width: 100%;
    }
  }

  .info-content {
    .content-title {
      display: flex;
      align-items: center;
      font-weight: 900;

      img {
        margin-right: 5px;
      }
    }

    .content-box {
      padding: 5px 16px 0;
    }
  }

  .redfont {
    color: #fe6e6c;
    font-weight: bold;
    font-size: 18px;

    &.borderleft::after {
      content: '';
      width: 1px;
      height: 10px;
      color: red;
      border-left: 1px solid #e3e3e3;
      position: absolute;
      left: -40px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
}

.info-list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed #ebebeb;

  > li {
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;

    > img {
      margin-right: 5px;
    }

    .list-title {
      width: 150px;
      font-weight: 900;
    }
  }
}

/deep/.ant-table-placeholder {
  z-index: unset;
}

.totalExpenses {
  display: flex;
  justify-content: space-between;
  font-weight: bolder;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  background-color: #fff;
}

/deep/ .ant-checkbox-disabled + span {
  color: unset;
}

/deep/ div.inner-table.ant-table-wrapper {
  margin: -7px -11px 5px -11px;

  table {
    border: none;
  }
}

.full-modal {
  /deep/ .ant-modal {
    max-width: 100%;
    top: 0 !important;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}

/deep/ .full-modal {
  /deep/ .ant-modal {
    top: 0 !important;
  }
}
</style>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.page-main {
  height: auto;

  .banner {
    background-image: url(../../assets/contract-top.png);
  }

  .container {
    padding: 0px 0px 0px;

    .content-list {
      margin-top: 15px;
    }
  }

  .font-active {
    cursor: pointer;
  }
}

/deep/.ant-select-dropdown {
  width: 400px !important;
}
</style>